<?php
require_once "jssdk.php";
require_once "weixin_info.php";
require_once "config.php";
$type = empty($_GET['type']) ? '' : $_GET['type'];

$jssdk = new JSSDK("", "");
$signPackage = $jssdk->GetSignPackage();
$sale_sql = $mysql->query('select * from dyspw_salesman where u_id = '.$_SESSION['Member_info'][0]['id']);
$sale = $sale_sql->fetch_all(MYSQLI_ASSOC);
?>
 <!doctype html>
 <html>

 <head>
     <meta charset="utf-8">
     <meta name="viewport"
         content="height=device-height,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
     <meta content="telephone=no" name="format-detection" />
     <link rel="stylesheet" type="text/css" href="css/invite.css">
     <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
     <script src="js/jquery-2.2.4.min.js" type="text/javascript"></script>
     <title>邀请好友</title>
        <style>
            #input {position: absolute;top:-143px;width:50px;border: none;outline: none;color: #fff}
        </style>
 </head>

 <body>
     <div id="content" class="inviteMain">
         <div class="invite">
             <p class="inviteImg" style="position: relative;">
                 <img src="<?php if($type == 'shop'){echo 'images/invite_shop.png';}else{echo 'images/invite.png';} ?>" alt="" >
                 <img src="<?php if($type == 'shop'){echo $sale[0]['invite_shop'];}else{echo $sale[0]['invite_img'];} ?>" alt="" style="position: absolute;bottom: 30px;width: 80px;left: 50%;transform: translateX(-50%);">
             </p>
             <p class="total">
                 累计成功邀请<span class="invNum"><?php echo $sale[0]['invite_num'] ?></span>
             </p>
             <div class="divBtn">
                 <!-- <p>分享专属海报</p> -->
                 <p>分享链接</p>
             </div>
             <div class="explain">
             <!-- <p class="exImg"><img src="images/2.png" alt=""></p> -->
                 <div class="int">  成功邀请的粉丝每招募一家商家，您都能从中获利哦！</div>
             </div>
             <p class="invCode">邀请码：<span><?php echo $sale[0]['invite_code'] ?></span> <span class="copy">复制</span></p>
             <input id="input" value="<?php echo $sale[0]['invite_code'] ?>"/>
         </div>
         <div class="rule">
             <p id="title">邀请规则</p>
             <p>
                 【方式1】分享邀请海报，粉丝可以识别海报二维
                 码登录app并注册；
             </p>
             <p>【方式2】分享邀请链接给粉丝并注册；</p>
             <p id="speExpalain">
                 粉丝登录app并使用您的邀请码成功注册，TA将永远成为您的
                 粉丝，TA找募的商家以及他的粉丝招募的商家您都可以获得
                 返利，并自动计入您的账户中。
             </p>
         </div>
     </div>
     </div>
     <div class="zhezhao" style="    width: 100%;display: inline-block;position: fixed;z-index: 99;opacity: 0.5;top: 0px;padding-top: 50px;background: rgb(0, 0, 0);height: 100%;display:none;"></div>
     <div class="back_img" style="position: fixed;width: 100%;top: 15%;z-index: 999;display:none;">
         <img src="<?php if($type == 'shop'){echo 'images/invite_shop.png';}else{echo 'images/invite.png';} ?>" alt="" style="    width: 70%;margin: 0 auto;display: block;position: relative;">
         <img src="<?php if($type == 'shop'){echo $sale[0]['invite_shop'];}else{echo $sale[0]['invite_img'];} ?>" alt="" style="position: absolute;bottom: 50px;width: 100px;left: 50%;transform: translateX(-50%);">
     </div>
     <div class="click-here">
        <div>
            <img src="./images/clickhere.png" alt="">
            <img src="./images/iknow.png" alt="" class="i-know">
        </div>
     </div>
     <canvas id="member" width="303" height="540" style="display: none;"></canvas>
 </body>
    <script type="text/javascript">
        $(function(){
            var canvas = document.querySelector("#member");
            var ctx = canvas.getContext("2d");
            var myImage = new Image();

            myImage.src = "<?php if($type == 'shop'){echo 'images/invite_shop.png';}else{echo 'images/invite.png';} ?>";  //背景图片 你自己本地的图片或者在线图片
            myImage.setAttribute("crossOrigin",'Anonymous')

            myImage.onload = function(){
                ctx.drawImage(myImage , 0 , 0 , 303 , 540);
                var myImage2 = new Image();

                myImage2.src = '<?php if($type == 'shop'){echo $sale[0]['invite_shop'];}else{echo $sale[0]['invite_img'];} ?>';  //你自己本地的图片或者在线图片
                myImage2.setAttribute("crossOrigin",'Anonymous')

                myImage2.onload = function(){
                    ctx.drawImage(myImage2 , 109 , 400 , 86 , 86);
                }
            }

            // 复制邀请码
            $('.copy').bind('click',()=>{
                if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备
					window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
                    let input = document.querySelector('#input')//要复制文字的节点
                    let range = document.createRange();
					// 选中需要复制的节点
                    range.selectNode(input);
					// 执行选中元素
                    window.getSelection().addRange(range);
					// 执行 copy 操作
					document.execCommand('copy');
 
					// 移除选中的元素
					// window.getSelection().removeAllRanges();
				}else{
					let input = $('#input')[0]//要复制文字的节点
					input.select(); // 选择对象
					document.execCommand("Copy"); // 执行浏览器复制命令
				}
                // $('#input').val()
                // let range = document.createRange();
                // console.log($('#input').val())
                // // console.log()
                // let input = $('#input')[0]
                // input.select(); // 选中文本
                // if ($(input.select()).rangeCount > 0){
                //     $(input.select()).removeAllRanges();
                // }
                // $(input.select()).addRange(range);
                // document.execCommand("Copy");
                alert(navigator.userAgent.toLowerCase())
            })
            // 微信分享
            wx.config({
                debug: false,
                appId: '<?php echo $signPackage["appId"]; ?>',
                timestamp: '<?php echo $signPackage["timestamp"]; ?>',
                nonceStr: '<?php echo $signPackage["nonceStr"]; ?>',
                signature: '<?php echo $signPackage["signature"]; ?>',
                jsApiList: [
                    // 所有要调用的 API 都要加到这个列表中
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'showAllNonBaseMenuItem',
                    'updateAppMessageShareData'
                ]
            });
            wx.showAllNonBaseMenuItem();
            wx.ready(function() {
                var base64 = canvas.toDataURL("image/png");
                console.log(base64)
                wx.onMenuShareAppMessage({
                    // link: _link,
                    link: '',
                    imgUrl: base64,
                    desc: '<?php if($type == 'shop'){echo '欢迎进入5G营销新时代';}else{echo '全名副业新时代';} ?>',
                    title: '<?php if($type == 'shop'){echo '商家招募';}else{echo '人员招募';} ?>',
                    success: function(data) {
                        //alert('分享完成!')
                    },
                    cancel: function() {}
                });
            });

            // 蒙版消失
            $(".i-know").click(()=>{
                $(".click-here").css('display','none')
            })
            // 蒙版显示
            $(".divBtn").click(()=>{
                $(".click-here").css('display','block')
            })

            $(".inviteImg").click(function(){
                $(".zhezhao").show();
                $(".back_img").show();
                $("body").css("position",'fixed');
            })
            $(".back_img").click(function(){
                $(".zhezhao").hide();
                $(".back_img").hide();
                $("body").css("position",'static');
            })
        })
    </script>
 </html>
